<script setup>
import {getCategory} from "@/api/catalog";

import {ref, reactive, inject, watch} from "vue";
import { useRoute } from "vue-router";

const route = useRoute()

let category = reactive(route.query.category);

const data=ref([]);

const isSearch = inject('isSearch')
isSearch.value=true;
// console.log(cate)
const te = async ()=>{
  console.log('category:'+category)
let CategoryData= await getCategory(category);
if(CategoryData.status==1){
   data.value=CategoryData.data;
  console.log(data.value);
}else{
  alert('请求失败');
}}
te();
watch(
    () => route.query.category,
    (newCategory) => {
      console.log('category'+newCategory)
      category= newCategory;
      te();
    }
);

</script>

<template>
  <div id="show">
    <div id="BackLink">
      <router-link to="/main"><a>Return to Main Menu</a></router-link>

    </div>
    <div class="Form">
     <table class="showGoods">
       <thead id="head">
         <th></th>
         <th>Product ID</th>
         <th>Name</th>
       </thead>
       <tr  v-for="product in data"  :key="product.productid">
         <td><img :src="product.descn"></td>
         <td>
           <router-link :to="{path:'/productForm', query:{productId:product.productid,category:category}}">{{ product.productid }}</router-link>
         </td>
         <td>{{ product.name }}</td>
       </tr>
     </table>

    </div>


  </div>
</template>

<style>
#show{
  /*margin-top: 5%;*/
}
#BackLink{
  padding: 1ex;
  float: right;
  border-width: .2ex 0ex .2ex 0px;
  border-style: solid;
  border-color:#eaac00 ;
}
#BackLink a{
  text-decoration: none;
  color: gray;
}
#BackLink a:hover{
  text-decoration: none;
  color: green;
}
.showGoods{
  margin: 5px auto;
  border-spacing: 0px;
  padding: 0 0 20px 0;
  padding: 1ex;
  background:inherit;
  text-align:center;
}
.showGoods th,.showGoods td{
  /*padding: 5px 1px 5px 15px;*/
  /* padding: 5px 5px 5px 5px;*/
  border-spacing: 0px;
  font-size: 20px;
  text-align: center;
  margin: 0px;
  background-color: #dae8da;
  border-top: 1px solid #defceb;
  border-bottom: 1px solid #c1efca;
  border-right: 1px solid #cbd8cc;
  width:10%;
  height:20px;
}
.showGoods tr.head,.showGoods th{
  color: #fff;
  background-color: #35813b;
  border-bottom: 2px solid #37833d;
  border-right: 1px solid #c1efca;
  border-top: 1px solid #97d690;
  text-align: center;
  text-shadow: -1px -1px 1px #666666;
  letter-spacing: 2px;
}
.showGoods td{
  color: #54a05a;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #ffffff;
}
</style>